<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ajax</title>
	<style type="text/css">
	html body div ul li {
		padding: 0;
		margin: 0;
	}
	  #ct li{
	  	list-style: none;
	  	line-height: 50px;
	  	border: 1px solid #eee;
	  	margin-bottom: 10px;
	  	cursor: pointer;
	  }
	  #load-more{
	  	display: block;
	  	margin: 10px auto;
	  	cursor: pointer;
	  }
	  #load-more img{
	    width: 40px;
	    height: 40px;
      }
	.btn {
		display: inline-block;
		width: 150px;
		line-height: 50px;
		text-align: center;
		border: 1px solid #E27272;
		border-radius: 3px;
		color: #E27272;
		text-decoration: none;
	}
	.hover {
		background: green;
	}

	</style>
</head>
<body>
  <ul id="ct">
  	<li>内容1</li>
  	<li>内容2</li>
  	<li>内容3</li>
  </ul>

  <a id="load-more" class="btn" href="#">加载更多</a>
</body>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
	var $loadMoreBtn = $('#load-more'),
		$ct = $('#ct');

	var cur = 3;

	$ct.find('li').on('mouseenter',function(){
		$(this).addClass('hover');
	}).on('mouseleave',function(){
		$(this).removeClass('hover');
	});

	$loadMoreBtn.on('click',function (e){
      e.preventDefault(); // 防止点击 a 链接页面跳到顶部
      if ($(this).data('isLoading')) {
      	return;
      }
      $(this).data('isLoading',true).html('<img src="loading.gif" />');

      $.ajax({
      	url: '2.php',
      	dataType: 'json',
      	type: 'get',
      	data: {
      		start: cur,
      		len: 4
      	},
      	success: function(json){
      		onSuccess(json);
      	},
      	error: function(){
      		onError();
      	}
      });

	});

    function onSuccess(json){
    	$loadMoreBtn.data('isLoading',false)
    	            .text('加载更多');
    	console.log(json)
    	if (json.status === 1) {
    		append(json.data);
    		cur +=6;
    	}else{
    		alert('获取数据失败');
    	}
    }

    function onError(){
       $loadMoreBtn.data('isLoading',false)
                   .text('加载更多');
       alert('系统异常');
    }

    function append(arr){
    	for (var i = 0; i < arr.length; i++) {
    		$ct.append('<li>'+ arr[i] + '</li>')
    	}
    }
</script>

</html>